//
import MiddleSided1 from "./MiddleSided1"
import MiddleSided2 from "./MiddleSided2"
import MiddleSided3 from "./MiddleSided3"
import MiddleSided4 from "./MiddleSided4"

const MiddleSided = ({ data = {} }) => {
  return (
    <div className="w-[356px] h-[932px] p-[12px] bg-[#EAF2FF] border-1 border-[#2A78FF] ">
      <div
        id="middle-container"
        className="relative h-full overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar"
      >
        <MiddleSided1 data={data.basicInfo} />
        <MiddleSided2 data={data.auditInfo} />
        <MiddleSided3 data={data.risk} />
        <MiddleSided4 data={data.rectification} />
      </div>
    </div>
  )
}

export default MiddleSided
